<template lang="pug">
  .dashboard-map-filter-wrap(v-if="isLoad")
    .dashboard-map-filter-title 可见层
    FilterGroup(
      v-model="optionList.deviceTypeList"
      label="设施选择"
      :options="deviceTypeList")
    hr
    FilterGroup(
      v-model="optionList.caliberList"
      label="口径选择"
      :options="caliber")
    hr
    FilterGroup(
      v-model="optionList.gisList"
      label="GIS图层"
      :options="gis")
    hr
    FilterGroup(
      v-model="optionList.parameterList"
      label="参数显示"
      :options="parameter")
</template>

<script>
/*
 * @name dashboard-map-filter 地图定位点选项卡
 * @author caixq <caixq@gddxit.com>
 * @description 汇总定位点的所有筛选条件
 */
import { gis, parameter } from './info'
import FilterGroup from './Group'
export default {
  name: 'dashboard-map-filter',
  components: {
    FilterGroup
  },
  props: {
    devicesFilterList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    devicesFilterList: {
      handler: function (value) {
        this.$set(this.optionList, 'deviceTypeList', value)
      },
      deep: true
    },
    'optionList.deviceTypeList': {
      handler: function (data) {
        this.$emit('dashboardMapFilter', 'deviceTypeList', data)
      }
    },
    'optionList.caliberList': {
      handler: function (data) {
        let caliberList = []
        data.forEach(item => {
          // console.log('data', item)
          if (item) {
            // console.log(typeof item, item)
            let range = item.split('-')
            // TODO: wangrf 待优化，口径分组过滤
            caliberList = caliberList.concat(this.caliberItems.filter(item => {
              if (range[0] !== '' && range[1] !== '') {
                return item.value > range[0] && item.value <= range[1]
              } else if (range[0] !== '' && range[1] === '') {
                return item.value > range[0]
              } else if (range[0] === '' && range[1] !== '') {
                return item.value <= range[1]
              }
            }))
          }
        })
        this.$emit('dashboardMapFilter', 'caliberList', caliberList.map(item => item.value))
      }
    },
    'optionList.gisList': {
      handler: function (data) {
        this.$emit('dashboardMapFilter', 'gisList', data)
      }
    },
    'optionList.parameterList': {
      handler: function (data) {
        // console.log(data)
        this.$emit('dashboardMapFilter', 'parameterList', data)
      }
    }
  },
  data () {
    return {
      // 控制选项卡是否显示
      isLoad: false,
      // 各分组选项
      deviceTypeList: [],
      // fullDeviceTypeList: [],
      caliber: [],
      // fullCaliberList: [],
      vender: [],
      // fullVenderList: [],
      gis,
      parameter,
      optionList: {
        deviceTypeList: [],
        caliberList: [],
        facturerList: [],
        gisList: [],
        parameterList: []
      },
      // deviceChecked: false,
      // caliberChecked: false,
      // venderChecked: false,
      caliberItems: []
    }
  },
  methods: {
    getFullList: (list) => list.map(({value}) => value),
    getRelation () {
      this.$getRelation({
        relations: ['deviceNames', 'caliber', 'manufacturer'].join(',')
      }).then(({deviceNames, caliber, manufacturer}) => {
        const neccssaryTypes = ['大用户电磁水表', 'DMA专用水表', '分区流量计', '压力监测仪']
        // 设备选择渲染列表 , '噪声记录仪', '瞬态压力记录仪', '水质监测仪', '水厂', '智能阀门'
        this.deviceTypeList = deviceNames.filter(item => neccssaryTypes.includes(item.label))
        // FIXME: wangrf 临时添加智能阀门,后面去掉
        // this.deviceTypeList.push({
        //   label: '智能阀门',
        //   value: 'gate'
        // })
        // this.vender = manufacturer
        // this.gis = this.gis.filter(item => ['≥DN200', '<DN200', '消防栓', '阀门'].includes(item.label))
        // console.log(this.parameter)
        // this.parameter = this.parameter.filter(item => ['标签', '分区', 'DMA', '聚合'].includes(item.label))
        // console.log(deviceNames)
        this.caliberItems = caliber
        this.caliber = [
          // {
          //   label: '50及以下',
          //   value: '-50'
          // }, {
          //   label: '50至200',
          //   value: '50-200'
          // }, {
          //   label: '200至300',
          //   value: '200-300'
          // }, {
          //   label: '300至600',
          //   value: '300-600'
          // }, {
          //   label: '600以上',
          //   value: '600-'
          // }
          {
            label: '50及以下',
            value: '-50'
          }, {
            label: '50至200',
            value: '50-200'
          }, {
            label: '200至300',
            value: '200-300'
          }, {
            label: '300至400',
            value: '300-400'
          }, {
            label: '500',
            value: '400-500'
          }, {
            label: '600',
            value: '500-600'
          }, {
            label: '700',
            value: '600-700'
          }, {
            label: '700以上',
            value: '700-'
          }
        ]
        // console.log('caliber', caliber)
        this.$set(this.optionList, 'deviceTypeList', this.getFullList(this.deviceTypeList))
        this.$set(this.optionList, 'caliberList', this.getFullList(this.caliber))
        // this.$set(this.optionList, 'facturerList', this.getFullList(manufacturer))
        this.$set(this.optionList, 'gisList', this.getFullList(this.gis))
        this.$set(this.optionList, 'parameterList', ['1', 'areaLayer'])
        // this.$emit('optionList', {deviceNames, caliber, manufacturer})
        this.isLoad = true
      })
    }
  },
  mounted () {
    this.getRelation()
  }
}
</script>

<style lang="sass" scoped>
.dashboard-map-filter-wrap
  position: absolute
  bottom: 40px
  right: 72px
  width: 436px
  padding: 20px
  background-color: #fff
  box-shadow: 1px 1px 5px #eae7e0
  border-radius: 5px
  opacity: 0.96
  .dashboard-map-filter-title
    text-align: center
    font-size: 14px
    font-weight: bolder
    color: #222
  .check-tilte
    font-size: 14px
    font-weight: bolder
    color: #222
    margin: 0
  .check-main
    line-height: 0
  hr
    margin: 10px 0 5px
</style>
